<template>
  <div class="node-login-page">
    <div class="logo">
      <img src="@/assets/svgs/logo.svg" alt="" />
    </div>
    <div class="login-form">
      <div class="tips">
        <h2>设置用户唯一标识</h2>
        <span
          >通过唯一标识可访问个人主页，如：<a href="http://hub.jianmu.dev/jianmu">http://hub.jianmu.dev/jianmu</a>
        </span>
      </div>
      <div class="identification-input">
        <span>请输入唯一标识</span>
        <input type="text" class="input" />
      </div>
      <div class="confirm-btn">确定</div>
    </div>
    <div class="copy-right">©2020-2021 版权所有 九州云信息科技有限公司</div>
  </div>
</template>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.node-login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  // max-width: 83.33vw;
  background-color: #fff;
  .logo {
    margin-top: 6.35vw;
    width: 7.6vw;
    img {
      width: 100%;
    }
  }
  .login-form {
    width: 33.33vw;
    height: 20.83vw;
    margin-top: 6.35vw;
    background: #ffffff;
    box-shadow: 0vw 0vw 0.52vw 0vw #d3dae8;
    .tips {
      margin-top: 3.13vw;
      margin-left: 2.08vw;
      h2 {
        width: 10.52vw;
        height: 1.25vw;
        font-size: 1.25vw;
        font-family: PingFang-SC-Heavy, PingFang-SC;
        font-weight: 800;
        color: #042749;
        line-height: 1.25vw;
        letter-spacing: 0.05vw;
        margin-bottom: 0.52vw;
      }
      span {
        width: 21.98vw;
        height: 1.35vw;
        font-size: 0.73vw;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #042749;
        line-height: 1.35vw;
        a {
          color: #096dd9;
          text-decoration: none;
        }
      }
    }
    .identification-input {
      margin-top: 2.08vw;
      margin-left: 2.08vw;
      span {
        width: 5.1vw;
        height: 1.04vw;
        font-size: 0.73vw;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #042749;
        line-height: 1.04vw;
      }
      input {
        text-indent: 0.52vw;
        margin-top: 0.52vw;
        width: 29.11vw;
        height: 2.08vw;
        font-size: 1.04vw;
        border-radius: 0.21vw;
        border: 1px solid #096dd9;
      }
    }
    .confirm-btn {
      margin: 3.13vw auto;
      text-align: center;
      width: 20.31vw;
      height: 2.6vw;
      line-height: 2.6vw;
      background: #096dd9;
      box-shadow: 0vw 0.31vw 0.73vw 0vw #acc3ee;
      border-radius: 0.21vw;
      color: #fff;
    }
  }
  .copy-right {
    margin-top: 17.6vw;
    position: absolute;
    bottom: 1.04vw;
    width: 18.07vw;
    height: 1.35vw;
    font-size: 0.83vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #042749;
    line-height: 1.35vw;
  }
}
// .node-login-page {
//   display: flex;
//   flex-direction: column;
//   align-items: center;
//   width: 100%;
//   max-width: 1600px;
//   background-color: #fff;
//   .logo {
//     margin-top: 122px;
//     width: 146px;
//     img {
//       width: 100%;
//     }
//   }
//   .login-form {
//     width: 640px;
//     height: 400px;
//     margin-top: 122px;
//     background: #ffffff;
//     box-shadow: 0px 0px 10px 0px #d3dae8;
//     .tips {
//       margin-top: 60px;
//       margin-left: 40px;
//       h2 {
//         width: 202px;
//         height: 24px;
//         font-size: 24px;
//         font-family: PingFang-SC-Heavy, PingFang-SC;
//         font-weight: 800;
//         color: #042749;
//         line-height: 24px;
//         letter-spacing: 1px;
//       }
//       span {
//         margin-top: 10px;
//         display: inline-block;
//         width: 422px;
//         height: 26px;
//         font-size: 14px;
//         font-family: PingFangSC-Regular, PingFang SC;
//         font-weight: 400;
//         color: #042749;
//         line-height: 26px;
//         a {
//           color: #096dd9;
//           text-decoration: none;
//         }
//       }
//     }
//     .identification-input {
//       margin-top: 40px;
//       margin-left: 40px;
//       span {
//         width: 98px;
//         height: 20px;
//         font-size: 14px;
//         font-family: PingFangSC-Regular, PingFang SC;
//         font-weight: 400;
//         color: #042749;
//         line-height: 20px;
//       }
//       input {
//         text-indent: 10px;
//         margin-top: 10px;
//         width: 559px;
//         height: 40px;
//         font-size: 20px;
//         border-radius: 4px;
//         border: 1px solid #096dd9;
//       }
//     }
//     .confirm-btn {
//       margin: 60px auto;
//       text-align: center;
//       width: 390px;
//       height: 50px;
//       line-height: 50px;
//       background: #096dd9;
//       box-shadow: 0px 6px 14px 0px #acc3ee;
//       border-radius: 4px;
//       color: #fff;
//     }
//   }
//   .copy-right {
//     margin-top: 338px;
//     position: absolute;
//     bottom: 20px;
//     width: 347px;
//     height: 26px;
//     font-size: 16px;
//     font-family: PingFangSC-Regular, PingFang SC;
//     font-weight: 400;
//     color: #042749;
//     line-height: 26px;
//   }
// }
</style>
